<template>
  <div>
    <!-- 卡片 -->
    <el-card>
      <div style="font-size:20px;margin-bottom:20px;">监控点位管理</div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入项目名称" size="small" v-model="name" clearable @keyup.enter.native="getList(1)">
            <el-button slot="append" icon="el-icon-search" @click="getList(1)">搜索</el-button>
          </el-input>
        </el-col>
      </el-row>
      <!-- 用户列表区域 -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="name" label="项目名称"  show-overflow-tooltip>
          <template slot-scope="scope">
            <!-- 跳转 -->
            <el-button type="text" size="mini" @click="toDetail(scope.row)" >{{scope.row.name}}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" v-if="role!='SUPER'">
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button type="text" size="mini" @click="set(scope.row)" v-if="role!='SUPER'">点位配置</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import base from "../api/base"
export default {
  data() {
    return {
      role:localStorage.getItem('role'),
      name:'',
      tableData: [],
      //   分页
      currentPage: 1,
      pageSize:10,
      total:0
    };
  },
  methods: {
    toDetail(row){
      console.log(row)
      let token = window.localStorage.getItem("token")
      window.location.href = `${base.spurl}/ncpr-lv/index?id=${row.id}&token=${token}&path=setPoint`
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },
    
    //配置
    set(val) {
      let token = window.localStorage.getItem("token")
      window.location.href = `${base.spurl}/ncpr-lv/config?id=${val.id}&token=${token}&path=setPoint`
    },
    //刷新列表
    getList(val) {
      if(val) {
        this.currentPage = 1
      }
      let params = {
        name: this.name,
        start: this.currentPage - 1,
        pageSize: this.pageSize
      }
      this.$api.loginhome.find(params)
      .then(res => {
        this.tableData = res.data;
        this.total = res.recordsTotal
      })
      .catch(() => {
      });
    },
  },
  created() {
    this.getList();
  }
};
</script>

<style scoped>
.el-pagination {
  padding-top: 20px;
  text-align: right;
}
/deep/.el-table th,
.el-table tr {
  background: #e4e4e4;
}
/deep/.el-table thead {
  color: #7a7c80;
}
/deep/.el-input-group__append button.el-button {
  background-color: #409eff;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 32px;
}
/deep/.el-input-group__append .el-button {
  padding: 10px 20px;
}
/deep/.el-input-group__append,
.el-input-group__prepend {
  color: #ffffff;
}
/deep/.el-table td,
.el-table th {
  text-align: center;
}
/deep/.el-table th > .cell {
  text-align: center;
}
/deep/.el-col-16 {
  text-align: right;
}
/deep/.el-dialog__body {
  margin: -35px 0px;
}
.con_dialog h4 {
  margin: 7px 0px 7px 30px;
}
.con_dialog p {
  margin: 7px 0px 7px 60px;
  font-size: 12px;
}
.mapbox {
  width: 610px;
  height: 220px;
  background: gainsboro;
  margin: 10px 0px 7px 60px;
}
.time_span {
  text-align: right;
  padding: 10px 48px 10px 10px;
}
</style>
